<template>
	<div class="container">
		<div class="box b1">栏目1</div>
		<div class="box b2">栏目2</div>
		<div class="box b3">栏目3</div>
	</div>
	<div class="container2">
		<div class="box b1">栏目1</div>
		<div class="box b2">栏目2</div>
		<div class="box b3">栏目3</div>
	</div>
	<div class="container3">
		<div class="box b1">栏目1</div>
		<div class="box b2">栏目2</div>
		<div class="box b3">栏目3</div>
	</div>
	<div class="container4">
		<div class="box b1">栏目1</div>
		<div class="box b2">栏目2</div>
		<div class="box b3">栏目3</div>
	</div>
	<div class="container5">
		<div class="box">这里有内容</div>
		<div class="box2">这里有内容测试测试测试</div>
	</div>
	<div class="container6">
		<div class="box">测测测测测试试试试试</div>
	</div>
	<div class="container6">
		<div class="box2">测测测测测试试试试试</div>
	</div>
	<div class="container6">
		<div class="box3">测测测测测试试试试试</div>
	</div>
	<div class="container6">
		<div class="box4">测测测测测试试试试试</div>
	</div>
	<div class="container7">
		<div class="pic"></div>
		<div class="info">这这这这这里有溢出的内容需要处理里有溢出的内容需要处理里有溢出的内容需要处理里有溢出的内容需要处理里有溢出的内容需要处理</div>
	</div>
	<div class="container8">
		<div class="pic"></div>
		<div class="info">
			<div class="info-p">
				这这这这这里有溢出的内容需要处理里有溢出的内容需要处理里有溢出的内容需要处理里有溢出的内容需要处理里有溢出的内容需要处理
			</div>
		</div>
	</div>
	<div class="container9">这这这这这里有溢出的内容需要处理里有溢出的内容需要处理里有溢出的内容需要处理里有溢出的内容需要处理里有溢出的内容需要处理</div>
	<div class="container10">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
	</div>
	<div class="container11">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
	</div>
	<div class="container12">
		<div class="box">1</div>
		<div class="box">2</div>
		<div class="box">3</div>
	</div>
	<div class="container13">
		<div class="c1"></div>
		<div class="c2"></div>
	</div>
	<div class="container14">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container15">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container16">
		<div class="box">1</div>
		<div class="box">2</div>
	</div>
	<div class="container17">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container18">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container19">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container20">
		<div class="box">测测测测测测测测测测测测测试试试试试试试试试试试试试</div>
	</div>
	<div class="container21">
		<div class="box b1">测测试测试测试</div>
		<div class="box b2">测测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试</div>
		<div class="box b3">测测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试试</div>
	</div>
	<div class="container22">
		<div class="pic"></div>
		<div class="info">这里是内容</div>
	</div>
	<div class="container23">
		<div class="box">操作</div>
	</div>
	<div class="container24">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>
	<div class="container25">
		<div class="box">这这这这这这这这这这这这这里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容</div>
		<div class="box">这这这这这这这这这这这这这里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容里有很多内容</div>
	</div>
	<div class="container26">
		<div class="box b1">测试1</div>
		<div class="box b2">测试2</div>
	</div>
	<div class="container27">
		<div class="box b1">测试1</div>
		<div class="box b2">测试2</div>
	</div>
	<div class="container28">
		<div class="box b1">
			测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试
		</div>
		<div class="box b2">测试2</div>
	</div>
	<div class="container29">
		<div class="pic"></div>
		<div class="info">
			测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1测试1
		</div>
	</div>
	<div class="container30">
		<div class="box b1">测试</div>
		<div class="box b2">测试</div>
		<div class="box b3">测试</div>
		<div class="box b4">测试</div>
		<div class="box b5">测试</div>
	</div>
	<div class="container31">
		<div class="box b1"></div>
		<div class="box b2"></div>
	</div>
	<div class="container32">
		<div class="box b1">这里有内容</div>
		<div class="box b2">这里有内容</div>
		<div class="box b3">这这这这这里很多内容里很多内容里很多内容里很多内容里很多内容</div>
	</div>
	<div class="container33">
		<div class="box">Item One</div>
		<div class="box">Item Two</div>
		<div class="box">Item Three has more content and so has a larger size</div>
	</div>
	<div class="container34">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
	</div>
	<div class="container35">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container36">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container37">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
	</div>
	<div class="container38">
		<div class="row">
			<div class="label">栏目1</div>
			<div class="text">
				<input type="text" placeholder="请输入文字1">
			</div>
			<div class="button">操作</div>
		</div>
		<div class="row">
			<div class="label">栏目2</div>
			<div class="text">
				<input type="text" placeholder="请输入文字2">
			</div>
			<div class="button">操作</div>
		</div>
		<div class="row">
			<div class="label">栏目3</div>
			<div class="text">
				<input type="text" placeholder="请输入文字3">
			</div>
			<div class="button">操作</div>
		</div>
	</div>
	<div class="container39">
		<div class="box">1</div>
		<div class="box">2</div>
	</div>
	<div class="container40">
		<div class="list">
			<div class="item">
				<div class="pic">
					<img src="../../images/1.jpg" alt="">
				</div>
				<div class="info">
					<div class="title">这里是标题</div>
					<div class="desc">这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明
					</div>
				</div>
			</div>
			<div class="item">
				<div class="pic">
					<img src="../../images/1.jpg" alt="">
				</div>
				<div class="info">
					<div class="title">这里是标题</div>
					<div class="desc">这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container41">
		<div class="list">
			<div class="item">
				<div class="pic">
					<img src="../../images/1.jpg" alt="">
				</div>
				<div class="info">
					<div class="title">这里是标题</div>
					<div class="desc">这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明
					</div>
				</div>
			</div>
			<div class="item">
				<div class="pic">
					<img src="../../images/1.jpg" alt="">
				</div>
				<div class="info">
					<div class="title">这里是标题</div>
					<div class="desc">这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明这里是说明
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container42">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
		<div class="box b6">6</div>
		<div class="box b7">7</div>
		<div class="box b8">8</div>
		<div class="box b9">9</div>
		<div class="box b10">10</div>
	</div>
	<div class="container43">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
		<div class="box b6">6</div>
		<div class="box b7">7</div>
		<div class="box b8">8</div>
		<div class="box b9">9</div>
	</div>
	<div class="container44">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
		<div class="box b6">6</div>
		<div class="box b7">7</div>
		<div class="box b8">8</div>
		<div class="box b9">9</div>
		<div class="box b10">10</div>
	</div>
	<div class="container45">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
		<div class="item push">5</div>
	</div>
	<div class="container46">
		<div class="text">这里内容</div>
		<div class="bottom">底部操作</div>
	</div>
	<div class="container47">
		<div class="icon"></div>
		<div class="input">
			<textarea rows="1"></textarea>
		</div>
		<div class="button"></div>
	</div>
	<div class="container48">
		<div class="sidebar">侧边</div>
		<div class="main">
			<div class="header">头部</div>
			<div class="body">主体</div>
			<div class="footer">底部</div>
		</div>
	</div>
	<div class="container49">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
	<div class="container50">
		<div class="box b1">1</div>
		<div class="box b2">2</div>
		<div class="box b3">3</div>
		<div class="box b4">4</div>
		<div class="box b5">5</div>
	</div>
</template>
<script>
export default {
	data() {
		return {}
	},
	methods: {}
}
</script>
<style lang="scss">
div[class^="container"] {
	margin-bottom: 10px;
}
.container50 {
	display: flex;
	justify-content: space-between;
	.box {
		border: 1px solid #000;
	}
}
.container49 {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 100px;
	.box {
		border: 1px solid #000;
		box-sizing: border-box;
		flex: 1 1 50%;
	}
	.b1 {
		width: 10px;
	}
	.b2 {
		width: 20px;
	}
	.b3 {
		width: 30px;
	}
	.b4 {
		width: 30px;
	}
	.b5 {
		width: 50px;
	}
}
.container48 {
	//display: flex;
	display: grid;
	grid-template-columns: 100px 1fr;
	.sidebar {
		border: 1px solid #000;
		height: 200px;
	}
	.main {
		display: flex;
		flex-direction: column;
		.header {
			height: 50px;
			border: 1px solid #000;
		}
		.body {
			flex: 1;
			border: 1px solid #000;
		}
		.footer {
			height: 50px;
			border: 1px solid #000;
		}
	}
}
.container47 {
	display: flex;
	gap: 10px;
	align-items: center;
	.icon {
		width: 40px;
		height: 40px;
		border: 1px solid #000;
	}
	.input {
		flex: 1;
		textarea {
			width: 100%;
			padding: 0;
			box-sizing: border-box;
			min-height: 30px;
			display: block;
		}
	}
	.button {
		height: 40px;
		width: 40px;
		border: 1px solid #000;
	}
}
.container46 {
	height: 200px;
	display: flex;
	flex-direction: column;
	border: 1px solid #000;
	.text {
		flex: 1;
		border: 1px solid #000;
	}
	.bottom {
		// margin-top: auto;
	}
}
.container45 {
	display: flex;
	gap: 10px;
	.item {
		width: 50px;
		height: 50px;
		border: 1px solid #000;
	}
	.push {
		margin-left: auto;
	}
}
.container44 {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		flex: auto;
	}
}
.container43 {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	height: 300px;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		flex: auto;
	}
}
.container42 {
	display: flex;
	flex-wrap: wrap;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		flex: auto;
	}
}
.container41 {
	.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		justify-items: flex-end;
	}
	.item {
		width: 100px;
		.pic {
			height: 40px;
			img {
				width: 100%;
				height: 100%;
				display: block;
				object-fit: cover;
			}
		}
		.desc {
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			display: -webkit-box;
		}
	}
}
.container40 {
	.list {
		display: flex;
		gap: 10px;
	}
	.item {
		flex: 1;
		.pic {
			height: 40px;
			img {
				width: 100%;
				height: 100%;
				display: block;
				object-fit: cover;
			}
		}
		.desc {
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			display: -webkit-box;
		}
	}
}
.container39 {
	display: flex;
	width: 200px;
	padding: 10px;
	border: 1px solid limegreen;
	.box {
		width: 300px;
		border: 1px solid #000;
	}
}
.container38 {
	.row {
		display: flex;
		margin-bottom: 10px;
		height: 40px;
		align-items: center;
	}
	.text {
		height: 50px;
		margin-left: 10px;
		display: flex;
		align-items: center;
		flex: 1;
		input {
			width: 100%;
		}
	}
	.button {
		font-size: 20px;
		padding: 10px;
	}
}
.container37 {
	display: flex;
	flex-wrap: wrap;
	.box {
		border: 1px solid #000;
		&.b1 {
			flex: 1 1 100%;
		}
		&.b2 {
			flex: 4;
		}
		&.b3 {
			flex: 6;
		}
		&.b4 {
			width: 80px;
		}
	}
}
.container36 {
	display: flex;
	.box {
		border: 1px solid #000;
		&.b1 {
			flex: 2;
		}
		&.b2 {
			flex: 4;
		}
		&.b3 {
			flex: 6;
		}
		&.b4 {
			width: 80px;
		}
	}
}
.container35 {
	display: flex;
	.box {
		border: 1px solid #000;
		&.b1 {
			//width: 20px;
			flex: 2;
		}
		&.b2 {
			//width: 40px;
			flex: 4;
		}
		&.b3 {
			//width: 60px;
			flex: 6;
		}
		&.b4 {
			// width: 80px;
			flex: 8;
		}
	}
}
.container34 {
	display: flex;
	width: 300px;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		box-sizing: border-box;
		flex: 1 1 100px;
		&.b3 {
			flex: 1 1 0;
		}
	}
}
.container33 {
	.box {
		border: 2px solid rgb(96 139 168);
		border-radius: 5px;
		background-color: rgb(96 139 168 / 0.2);
		flex: 1 1 auto;
	}
	border: 2px dotted rgb(96 139 168);
	display: flex;
}
.container32 {
	display: flex;
	.box {
		&.b1 {
			width: 100px;
			height: 100px;
			white-space: nowrap;
		}
		&.b2 {
			width: 100px;
			height: 100px;
		}
		&.b3 {
			flex-basis: auto;
			flex-shrink: 0;
		}
	}
}
.container31 {
	display: flex;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		&.b2 {
			margin-left: auto;
		}
	}
}
.container30 {
	display: flex;
	height: 150px;
	align-items: center;
	.box {
		flex: 1;
		height: 100px;
		border: 1px solid #000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.container29 {
	display: flex;
	.pic {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		//flex 0 0 auto
	}
	.info {
		margin-left: 10px;
		flex: 1;
		// flex-grow:1;
		// flex-basis: 0;
	}
}
.container28 {
	display: flex;
	.box {
		height: 100px;
		border: 1px solid #000;
		flex: 1 1 auto;
	}
}
.container27 {
	display: flex;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		flex: 1 1 50%;
		&.b1 {
			width: 30px;
		}
	}
}
.container26 {
	display: flex;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		flex: 1 0 0;
		&.b1 {
			width: 30px;
		}
	}
}
.container25 {
	display: flex;
	flex-wrap: wrap;
	.box {
		border: 1px solid #000;
	}
}
.container24 {
	display: flex;
	justify-content: space-between;
	.box {
		width: 20%;
		height: 100px;
		border: 1px solid #000;
		box-sizing: border-box;
	}
}
.container23 {
	height: 100px;
	.box {
		width: 20%;
		height: 40%;
		border: 1px solid #000;
	}
}
.container22 {
	width: min-content;
	.pic {
		width: 200px;
		height: 50px;
		border: 1px solid #000;
	}
	.info {}
}
.container21 {
	.box {
		//width: max-content;
		&.b1 {
			width: min-content;
		}
		&.b2 {
			width: max-content;
		}
		&.b3 {
			width: fit-content;
		}
	}
}
.container20 {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	width: 200px;
	border: 1px solid #000;
	.box {
		padding: 0 10px;
	}
}
.container19 {
	display: flex;
	flex-wrap: wrap;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		&.b2 {
			order: -1;
			flex: 1 0 100%;
		}
	}
}
.container18 {
	display: grid;
	grid-template-columns: repeat(3, 120px);
	height: 400px;
	border: 1px solid #000;
	justify-content: space-between;
	justify-items: center;
	align-items: center;
	align-content: start;
	gap: 10px 10px;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		&.b1 {
			height: 20px;
			width: 20px;
		}
	}
}
.container17 {
	display: flex;
	flex-wrap: wrap;
	width: 250px;
	height: 400px;
	justify-content: space-between;
	border: 1px solid #000;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		flex: 0 1 100px;
		&.b2 {
			height: 20px;
		}
	}
}
.container16 {
	display: flex;
	width: 250px;
	height: 200px;
	align-items: center;
	border: 1px solid #000;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		flex: 1 1 100px;
	}
}
.container15 {
	display: flex;
	flex-wrap: wrap;
	width: 250px;
	height: 400px;
	align-content: space-between;
	align-items: center;
	border: 1px solid #000;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		flex: 0 1 100px;
		&.b2 {
			height: 20px;
		}
	}
}
.container14 {
	display: flex;
	flex-direction: column;
	height: 250px;
	flex-wrap: wrap;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		&.b1 {
			height: 20px;
			align-self: flex-end;
			width: 20px;
		}
		margin-bottom:10px;
	}
}
.container {
	display: flex;
	flex-direction: column;
	border: 1px solid rgb(88, 84, 122);
	padding: 10px;
	.box {
		border: 1px solid #000;
		&.b2 {
			height: 100px;
		}
		&.b1 {
			align-self: flex-start;
		}
		&.b3 {
			align-self: flex-end;
		}
	}
}
.container2 {
	display: flex;
	border: 1px solid rgb(88, 84, 122);
	padding: 10px;
	align-items: center;
	height: 200px;
	gap: 10px;
	.box {
		border: 1px solid #000;
		&.b2 {
			height: 100px;
		}
		&.b1 {
			align-self: flex-start;
		}
		&.b3 {
			align-self: flex-end;
		}
	}
}
.container3 {
	display: flex;
	border: 1px solid rgb(88, 84, 122);
	padding: 10px;
	height: 200px;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	align-content: center;
	gap: 10px;
	.box {
		border: 1px solid #000;
		&.b2 {
			height: 100px;
		}
		&.b1 {
			align-self: flex-start;
		}
		&.b3 {
			align-self: flex-end;
		}
	}
}
.container4 {
	display: flex;
	flex-wrap: wrap;
	width: 250px;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		flex: 1 1 100px;
	}
}
.container5 {
	.box {
		width: min-content;
		border: 1px solid #000;
	}
	.box2 {
		width: max-content;
		border: 1px solid #000;
	}
}
.container6 {
	display: flex;
	.box {
		border: 1px solid #000;
		flex: initial;
	}
	.box2 {
		border: 1px solid #000;
		flex: auto;
	}
	.box3 {
		border: 1px solid #000;
		flex: none;
	}
	.box4 {
		border: 1px solid #000;
		flex: 1;
	}
}
.container7 {
	display: flex;
	.pic {
		width: 100px;
		height: 100px;
		flex-shrink: 0;
	}
	.info {
		flex-grow: 1;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}
.container8 {
	display: flex;
	.pic {
		width: 100px;
		height: 100px;
		flex-shrink: 0;
	}
	.info {
		flex-grow: 1;
		&-p {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
}
.container9 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.container10 {
	display: flex;
	.box {
		height: 100px;
		border: 1px solid #000;
		flex: 1 0 100px
	}
}
.container11 {
	display: flex;
	justify-content: space-around;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
	}
}
.container12 {
	display: flex;
	justify-content: space-between;
	.box {
		width: 100px;
		height: 100px;
		border: 1px solid #000;
	}
}
.container13 {
	display: flex;
	flex-direction: column;
	.c1 {
		margin-bottom: 10px;
		border: 1px solid #000;
		height: 30px;
	}
	.c2 {
		margin-top: 10px;
		border: 1px solid #000;
		height: 30px;
	}
}
</style>
